<template>
  <div>
    <el-table 
      :data="listData" 
      border
      :span-method="spanMethod"
    >
      <el-table-column label="序号" type="index" fixed></el-table-column>
      <el-table-column label="a">
        <el-table-column label="a1" prop="a1"></el-table-column>
        <el-table-column label="a2" prop="a2"></el-table-column>
      </el-table-column>
      <el-table-column label="b" prop="b"></el-table-column>
      <el-table-column label="c" prop="c"></el-table-column>
      <el-table-column label="d" prop="d"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      listData:[
        {
          a1:'a11',
          a2:'a21 a22',
          b:'b1 c1',
          // c:'',
          c:'d1 d2'
        },
        {
          a1:'a12',
          a2:'',
          b:'b2',
          c:'c2',
          d:''
        },
        {
          a1:'a13',
          a2:'a23',
          b:'b3',
          c:'c3',
          d:'d3'
        }
      ]
    }
  },
  created() {
  
  },
  methods: {
    spanMethod({row,column,rowIndex,columnIndex}){
      if(rowIndex === 0){
        if (columnIndex === 3) {
          return [1,2] 
          // 行合并会导致本来在那个位置的数值往后推一格，
          // 比如我现在3、4列合并，第4列原本的数值就会被挤到第5列，以此类推，
          // 所以，如果是被合并的那列不要留个空值，而是把后面的值往前挪,
          // 列合并不会有影响
        }else if(columnIndex === 2 || columnIndex === 4 ){
          return [2,1]
        }
      }
      return [1,1] // 返回值是[列合并几行,行合并几列]，根据if起始合并初始位置
    }

  },
  computed:{
   
  }
}
</script>

<style lang="scss" scoped>

</style>
